<template>
    <el-dialog
      title="个人设置"
      :visible.sync="dialogVisible"
      :show="show"
      width="30%"
      :before-close="handleClose"
      @close="$emit('update:show', false)">
      
        <div class="app-container">
          <el-form ref="elFormSetting" :model="formSettingData" :rules="rules" size="medium" label-width="120px">

            <el-form-item label="请输入原密码" prop="old_pass">
              <el-input
              show-password
                v-model="formSettingData.old_pass"
                placeholder="请输入原密码"
                clearable
                :style="{width:'100%'}"
              />
            </el-form-item>
            <el-form-item label="请输入新密码" prop="new_pass">
              <el-input
                show-password
                v-model="formSettingData.new_pass"
                placeholder="请输入新密码"
                clearable
                :style="{width:'100%'}"
              />
            </el-form-item>
            <el-form-item label="再输入新密码" prop="dbl_pass">
              <el-input
              show-password
                v-model="formSettingData.dbl_pass"
                placeholder="再输入新密码"
                clearable
                :style="{width:'100%'}"
              />
            </el-form-item>
          </el-form>
        </div>
      

      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
</template>

<script>
import {changePass} from '@/api/admin'

  export default {
    props: {
      show: Boolean,
      userInfo:  {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        dialogVisible: false,
        formSettingData: {
          old_pass: undefined,
          new_pass: undefined,
          dbl_pass: undefined
        },
        rules: {
          old_pass: [{ required: true, message: '旧密码不能为空', trigger: 'change' }],
          new_pass: [{ required: true, message: '新密码不能为空', trigger: 'change' }],
          dbl_pass: [{ required: true, message: '重复输入新密码', trigger: 'change' }]
        }
      };
    },
    watch: {
      show() {
        this.dialogVisible = this.show
      }
    },
    methods: {
      handleClose(done) {
        done()
      },
      submitForm() {
        this.$refs['elFormSetting'].validate(valid => {
          if (valid) {
            this.loading = true
            changePass(this.formSettingData).then((ret) => {
              this.$notify({
                title: '操作提示',
                message: ret.message
              })
              this.loading = false
              this.dialogVisible=false
            }).catch((err) => {
              console.error(err)
              this.loading = false
            })
          }
        })
      },
      resetForm() {
        this.$refs['elFormSetting'].resetFields()
      }
    }
  };
</script>